import React, { Component } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    PieChartOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { Layout, Menu, Button, Modal, Space, message } from 'antd';
import '@/assets/css/dashboard.css'

import { Link } from 'react-router-dom';
// 引入二级路由组件坑
import Admin from '@/router/Admin'
// 引入接口地址
import url from '@/config/url';
// 引入axios 
import axios from '@/http/http'
// 
import Cookies from 'js-cookie';

const { Header, Sider, Content } = Layout;

const { confirm } = Modal;
// 获取本地登录时存储的菜单
const navList = JSON.parse(localStorage.getItem('acl'))
console.log(navList);
// 定义一个函数,该函数的返回值为左侧菜单的每一项的菜单对象
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const items = [
    // getItem('Option 1', '1', <PieChartOutlined />),
    // getItem('Option 2', '2', <DesktopOutlined />),
    // getItem('User', 'sub1', <UserOutlined />, [
    //     getItem('Tom', '3'),
    //     getItem('Bill', '4'),
    //     getItem('Alex', '5'),
    // ]),
    // getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
    // getItem('Files', '9', <FileOutlined />),
];

// 给左侧菜单数组中push 每一个菜单对象
if (navList) {
    navList.map(item => {
        if (item.children.length != 0) {
            items.push(getItem(
                item.auth_name,
                item.auth_path,
                <UserOutlined />,
                item.children.map((item1) => {
                    // 判断展示 数据中 isNav==1 的菜单项
                    if (item1.is_nav == 1) {
                        return getItem(<Link to={item1.auth_path}>{item1.auth_name}</Link>, item1.auth_path, <VideoCameraOutlined />)
                    }

                })
            ))
        } else {
            items.push(getItem(
                <Link to={item.auth_path}>{item.auth_name}</Link>,
                item.auth_path,
                <PieChartOutlined />
            ))
        }
    })
}

class Dashboard extends Component {
    constructor(props) {
        super(props)
        console.log('constructor');
        // 做一个防跳墙的接口验证
        axios.get(url.PreCheck).then(res => {
            console.log(res);
            if (res.data.errNo == 0) {
                // 表示正常登录过的,设置登录状态为true
                this.setState({
                    islogined: true
                })
            } else {
                // 表示不是正常登录的,登录状态为false
                this.setState({
                    islogined: false
                })

                message.error('请先登录', 1, () => {
                    props.history.push('/login')
                })

            }
        })

    };
    state = {
        collapsed: false,  // 是否折叠 false 表示不折叠
        // defaultOpenKeys: [this.props.location.pathname]
        accountInfo: {}, // 用户信息
        islogined: false,  // 登录状态
    }
    // 点击事件 折叠左侧导航菜单
    setCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed
        })
    }
    // 设置默认选中的菜单项(初始选中的菜单项 key 数组)
    defaultSelectedKeys = [this.props.location.pathname]
    // 初始展开的 SubMenu 子菜单项 key 数组,要想让二级菜单默认打开,应该设置它的一级菜单key,放在该数组中
    defaultOpenKeys = [this.props.location.pathname.substr(0, this.props.location.pathname.lastIndexOf('/'))]
    render() {
        // console.log('当前组件的实例对象', this);
        const { collapsed, accountInfo } = this.state
        return (
            <>  {
                this.state.islogined ? <Layout>
                    <Sider trigger={null} collapsible collapsed={collapsed}>
                        <div className="logo" />
                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={this.defaultSelectedKeys}
                            defaultOpenKeys={this.defaultOpenKeys}
                            items={items}
                        />
                    </Sider>
                    <Layout className="site-layout">
                        <Header
                            className="site-layout-background"
                            style={{
                                padding: 0,
                            }}
                        >
                            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: () => this.setCollapsed(),
                            })}
                            {/* 展示当前用户信息 */}
                            <span>hello, {accountInfo.username}/{accountInfo.role}</span>
                            <span onClick={this.loginOut} className='loginout'>注销登录</span>
                        </Header>
                        <Content
                            className="site-layout-background"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                            }}
                        >
                            {/*根据左侧菜单项显示对应的组件内容  */}
                            <Admin></Admin>
                        </Content>
                    </Layout>
                </Layout> : <></>
            }</>
        );
    };
    componentDidMount() {
        // 调用获取用户信息接口
        axios.get(url.getmyinfo).then(res => {
            // console.log(res);
            this.setState({
                accountInfo: res.data.accountInfo
            })
        }).catch(e => { })
    };
    loginOut = () => {
        // 注销登录

        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认要退出当前账号吗?',
            onOk: () => {
                // 01: 清除登录时的token 
                Cookies.remove('jwt');
                localStorage.removeItem('acl')
                // 回到登录页
                message.success('退出登录', 1, () => {
                    this.props.history.push('/login')
                })

            },
            onCancel() {
                console.log('Cancel');
            },
        });

    }
}

export default Dashboard;
